<template>
  <div class="container">
    <i-button @click="bindPay">默认按钮</i-button>
    <i-input v-model="userInfo.nickName" title="昵称" autofocus placeholder="昵称" />
    <i-input v-model="userInfo.country" title="国家" autofocus placeholder="国家" />
    <i-input v-model="userInfo.province" title="省份" autofocus placeholder="省份" />
    <i-input v-model="userInfo.city" title="城市" autofocus placeholder="城市" />
    <img :src="userInfo.avatarUrl" />
  </div>
</template>

<script>

export default {
  data () {
    return {
      current: 'homepage',
      motto: 'Hello World',
      userInfo: {
        nickName: '',
        country: '',
        province: '',
        city: '',
        avatarUrl: ''
      }
    }
  },
  methods: {
    handleClick () {
        getUserInfo()
    },
    bindViewTap () {
      const url = '../logs/main'
      wx.navigateTo({ url })
    },
    bindPay () {
      const url = '../pay/main'
      wx.navigateTo({ url })
    },
    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
              console.log("get user " + JSON.stringify(this.userInfo))
            }
          })
        }
      })
    },
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    }
  },

  created () {
    // 调用应用实例的方法获取全局数据
    this.getUserInfo()
  }
}
</script>

<style scoped>
.slide-image{
  width:100%
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

.counter {
  display: inline-block;
  margin: 10px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>
